<script setup>
import { buyCommodity, getCommodityById, getShopById, addShoppingCartApi } from '@/api/ShopApi';
import router from '@/router';
import BeanUtil from '@/util/BeanUtil';
import { getParam, getTime } from '@/util/util';
import { reactive, ref } from 'vue';
import {ElMessage, ElLoading} from "element-plus";

// 商铺
const shop = reactive({});
// 商品
const commodity = reactive({
    introduceUrls: []
});
// 介绍图片
const introduces = ref([]);
// 购买商品数量
const commodityNum = ref(1);
// 是否可以购买
const canBuy = ref(true);
// 商品不存在
const nullShop = ref(false);


// 购买
function buy() {
  const loading = ElLoading.service({
    lock: true,
    text: '购买中...',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  // 购买商品
  buyCommodity(commodity.salesType, commodity.id, commodityNum.value).then(resp=>{
    if(resp.code===1000) {
        // this.href('/login');
    } else if(resp.code===1) {
        ElMessage({
          message: resp.msg,
          type: 'success'
        });
    } else {
        canBuy.value = false;
        ElMessage({
          message: resp.msg,
          type: 'warning'
        });
    }
    loading.close();
  }).catch(resp=>{
    ElMessage({
      message: '购买失败！',
      type: 'warning'
    });
    loading.close();
  });
  setTimeout(() => {
    loading.close();
  }, 1800000);
}
// 添加购物车
function addShoppingCart() {
  const loading = ElLoading.service({
    lock: true,
    text: '正在加入购物车...',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  addShoppingCartApi(commodity.id, commodityNum.value).then(resp=>{
    if(resp.code===1000) {
      // this.href('/login');
    } else if(resp.code===1) {
      ElMessage({
        message: "已成功加入购物车。",
        type: 'success'
      });
    } else {
      ElMessage({
        message: "加入购物车失败！",
        type: 'warning'
      });
    }
    loading.close();
  }).catch(resp=>{
    ElMessage({
      message: '加入失败！',
      type: 'warning'
    });
    loading.close();
  });
  setTimeout(() => {
    loading.close();
  }, 1800000);
}


// 查询ID商品
getCommodityById(getParam('id')).then(resp=>{
  if(resp.data===null) {
    nullShop.value = true;
    return;
  }
  BeanUtil.copyObject(resp.data, commodity);
  document.title = commodity.name;
  // 查询ID商铺
  getShopById(commodity.shopId).then(resp=>{
    BeanUtil.copyObject(resp.data, shop);
  }).catch(resp=>{
    ElMessage({
      message: '查询失败！',
      type: 'warning'
    });
  });
}).catch(resp=>{
  nullShop.value = true;
  ElMessage({
    message: '查询失败！',
    type: 'warning'
  });
});
</script>
<template>
  <div class="commodity-container">
    <el-empty v-if="nullShop" description='商品走丢了，去其它地方看看吧 . . .' style="padding: 200px 0;">
      <el-button type='primary' @click="router.push('/mall')">返回商城</el-button>
    </el-empty>
    <div v-else class="commodity-content">
      <div class="product-main">
        <img :src="commodity.coverUrl" class="product-image">
        <div class="product-info">
          <h1 class="product-title">{{commodity.name}}</h1>
          <div class="product-tags">
            <span v-if="commodity.salesType==='seckill'" class="tag-seckill">秒杀</span>
            <span v-else-if="commodity.salesType==='acution'" class="tag-auction">拍卖</span>
            <span class="sale-time">开始时间：{{getTime(commodity.sellTime, 10)}}</span>
          </div>
          <div class="price-box">
            <div class="price-info">
              <span class="price-label">价格</span>
              <span class="currency">￥</span>
              <span class="price-value">{{commodity.price}}</span>
            </div>
            <div class="stock-info">
              <span class="stock-label">库存</span>
              <span class="stock-value">{{commodity.num < 20 ? commodity.num : '充足'}}</span>
            </div>
          </div>
          <div class="purchase-box">
            <div class="quantity-selector">
              <span>购买数量：</span>
              <el-input-number v-model="commodityNum" :min="1" :max="commodity.num"></el-input-number>
              <span v-if="commodity.limited>0" class="limit-tag">限量{{commodity.limited}}</span>
            </div>
            <div class="action-buttons">
              <span v-if="Date.parse(commodity.sellTime)>new Date()" class="sale-start">
                {{getTime(commodity.sellTime, 10)}} 开售
              </span>
              <button class="cart-btn" @click="addShoppingCart" 
                      :disabled="!canBuy || commodity.num<=0 || Date.parse(commodity.sellTime)>new Date()">
                加入购物车
              </button>
              <button v-if="!canBuy" class="buy-btn disabled">无法购买</button>
              <button v-else-if="commodity.num<=0" class="buy-btn disabled">已售空</button>
              <button v-else-if="Date.parse(commodity.sellTime)>new Date()" class="buy-btn disabled">未到发售时间</button>
              <button v-else class="buy-btn" @click="buy">立即购买</button>
            </div>
          </div>
        </div>
      </div>

      <div class="divider"></div>

      <div class="shop-info">
        <img :src="shop.coverUrl" class="shop-image">
        <div class="shop-detail">
          <h2 class="shop-name">{{shop.name}}</h2>
        </div>
      </div>

      <div class="divider"></div>

      <div class="product-detail">
        <div v-if="commodity.introduceUrls===null||commodity.introduceUrls.length===0" class="empty-intro">
          当前商品没有图片介绍
        </div>
        <div v-else class="intro-content">
          <div class="detail-header">
          <div class="header-line"></div>
          <h2>商品介绍</h2>
          <div class="header-line"></div>
        </div>
          <!-- <h2 style="margin-bottom: 10px;">商品介绍</h2> -->
          <img v-for="introduce in commodity.introduceUrls" :key="introduce" :src="introduce" class="intro-image">
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.commodity-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.commodity-content {
  padding: 20px;
}

.product-main {
  display: flex;
  gap: 40px;
  margin-bottom: 30px;
}

.product-image {
  width: 400px;
  height: 400px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

.product-image:hover {
  transform: scale(1.02);
}

.product-info {
  flex: 1;
}

.product-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.product-tags {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.tag-seckill, .tag-auction {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
}

.tag-seckill {
  background-color: #E3251B;
}

.tag-auction {
  background-color: #e1ac1b;
}

.sale-time {
  color: #666;
  font-size: 14px;
}

.price-box {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-info {
  display: flex;
  align-items: baseline;
}

.price-label {
  color: #666;
  margin-right: 8px;
}

.currency {
  color: #E3251B;
  font-size: 18px;
  margin-right: 4px;
}

.price-value {
  color: #E3251B;
  font-size: 28px;
  font-weight: 600;
}

.stock-info {
  color: #666;
}

.purchase-box {
  margin-top: 24px;
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.limit-tag {
  color: #666;
  font-size: 14px;
}

.action-buttons {
  display: flex;
  gap: 16px;
  align-items: center;
}

.cart-btn, .buy-btn {
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cart-btn {
  background-color: #ffd814;
  color: #000;
}

.cart-btn:hover {
  background-color: #f5c000;
}

.buy-btn {
  background-color: #E3251B;
  color: #fff;
}

.buy-btn:hover {
  background-color: #d41f16;
}

.buy-btn.disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.divider {
  height: 1px;
  background: #eee;
  margin: 32px 0;
}

.shop-info {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.shop-image {
  width: 160px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.shop-name {
  font-size: 20px;
  color: #333;
  margin: 0;
}

.product-detail {
  padding: 32px 0;
}

.empty-intro {
  text-align: center;
  color: #666;
  padding: 40px 0;
}

.intro-content {
  max-width: 900px;
  margin: 0 auto;
}

.intro-image {
  width: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: block;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.detail-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
  white-space: nowrap;
}

.header-line {
  height: 1px;
  background: linear-gradient(to right, transparent, #ddd, transparent);
  flex: 1;
  max-width: 200px;
}

@media (max-width: 768px) {
  .header-line {
    max-width: 100px;
  }
}
</style>
